// by Jsung

@function rem($size){
    @return ($size/75)*1rem
};

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html,body{
    height: 100%;
    font-family: '微软雅黑';
}
body{
    background: url('../../images/supermarket _img/bgi.png');
}
    .spree-top{
        position: relative;
        width: rem(750);
        height: rem(481);
        background: url('../../images/supermarket _img/banner.png')no-repeat center/100% 100%;
        margin-bottom: rem(110);

        &>div{
            position: absolute;
            left: 50%;
            bottom: rem(-80);
            margin-left: rem(-369)/2;
            height: rem(93);
            width: rem(369);
            background: url('../../images/supermarket _img/fenlan.png')no-repeat center/100% 100%;
        }
    }

    .wrapper{
        width: rem(730);
        margin: 0 auto;

        .header{
            position: relative;
            width: 100%;
            margin-top: rem(30);

            .h-title{
                width: rem(309);
                height: rem(81);
                background: url('../../images/supermarket _img/fenlan2.png')no-repeat center/100% 100%;
                margin: 0 auto;
            }
            .h-title-b{
                background-image: url('../../images/supermarket _img/fenlan3.png');
            }
        }

        .price-top{
            width: 100%;
            background-color: #EBE8F3;
            position: relative;
            border-radius: rem(6);
            padding: rem(66) rem(32) rem(28);
            margin-top: rem(30);

            &.pt-0{
                padding-top: 0;
            }
            &>ul{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;

                li{
                    width: 32%;
                    height: rem(45);
                    text-align: center;
                    line-height: rem(45);
                    background: url('../../images/supermarket _img/blue-nav.png')no-repeat center/100% 100%;
                    color: white;
                    font-size: rem(26);

                    &.supermarket-tab-curr{
                        background-image: url('../../images/supermarket _img/pink-nav.png');
                    }
                }
            }
            .price-top-title{
                position: absolute;
                width: rem(282);
                height: rem(55);
                background: url('../../images/supermarket _img/title-99.png')no-repeat center/100% 100%;
                left: 50%;
                top: rem(-15);
                margin-left: rem(-282)/2;

            }
            .price-top-body{
                width: 100%;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                .price-card{
                    width: rem(325);
                    height: rem(392);
                    display: flex;
                    flex-direction: column;
                    margin-top: rem(14);

                    &>a{
                        flex: 1;
                        height: rem(323);
                        width: rem(325);
                        position: relative;

                        img{
                            width: 100%;
                            height: 100%;
                        }
                        span{
                            position: absolute;
                            text-align: center;
                            line-height: rem(30);
                            width: 100%;
                            height: rem(30);
                            left: 0;
                            bottom: 0;
                            white-space:nowrap; 
                            overflow:hidden; 
                            text-overflow:ellipsis;
                            background-color: rgba(0, 0, 0, .7);
                            color:white;
                            padding: 0 rem(10);
                            font-size: rem(16);
                        }
                    }
                    &>div{
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        height: rem(70);
                        width: 100%;
                        background-color: #A161DC;
                        &>div{
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            div:last-child{
                                color: #fff;
                            }
                            .price-card-num{
                                font-size: rem(38);
                                margin-left: rem(6)
                            }
                        }
                        &>span{
                            height: rem(55);
                            width: 0;
                            border-left: 1px solid #6312AE;
                            border-right: 1px solid #CA90FF;
                            
                        }
                        .order-now{
                            position: relative;
                            margin-right: rem(30);
                            color: white;

                            &::after{
                                content: '';
                                position: absolute;
                                width: rem(12);
                                height: rem(21);
                                right: rem(-22);
                                top: rem(18);
                                background: url('../../images/supermarket _img/arrows.png')no-repeat center/100% 100%;

                            }
                        }
                    }
                }
            }

        }

        .scroll-top{
            width: rem(155);
            height: rem(108);
            background: url('../../images/supermarket _img/fanhuidingbu.png')no-repeat center/100% 100%;
            margin: rem(30) auto;
        }
        
    }
